/**
 * 组件：消息对话组件
 * @author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import Util from '../utils/util';


class MessageSayItem extends Component {

    static propTypes = {
        message: PropTypes.string,                       //消息内容
        onPress: PropTypes.func,
    }

    static defaultProps = {
        message: 'hello world',
    }

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {

    }


    render() {
        const {message, onPress} = this.props
        return (
            <TouchableOpacity onPress={onPress}>
                <View style={styles.bubbleContainer}>
                    <View style={styles.bubbleBody}>
                        <Text style={styles.message}>{message}</Text>
                    </View>
                    <View style={styles.arrowContainer}>
                        <View style={styles.arrow}/>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    bubbleContainer: {
        paddingLeft:6,
    },
    arrowContainer:{
        width: 7,
        height: 20,
        position:'absolute',
        top:10,
        overflow:'hidden',
    },
    arrow: {
        width: 11,
        height: 11,
        borderWidth: 1,
        borderColor: '#e9e9e9',
        transform: [{rotateZ:'45deg'}],
        backgroundColor:'white',
        marginLeft:2,
        marginTop:1,
        borderRadius:2,
    },
    bubbleBody: {
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#e9e9e9',
        padding: 10,
        backgroundColor:'white',


    },
    message: {
        fontSize: 14,
        color: '#6F6F6F',
        // backgroundColor:'red',

    },
});

export default MessageSayItem;